<template>
  <view class="main-container">
    <view class="info-list">
      <view class="info-item">
        <text class="info-item-left">头像</text>
				<!-- @click="changeHeadImg" -->
        <view class="info-item-right">
          <image class="user-logo" :src="util.attachedUrl(detailMemberInfo.user_logo, baseUrl)"></image>
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">昵称</text>
        <view class="info-item-right">
          <!-- #ifdef MP-WEIXIN -->
          <input class="info-content" type="nickname" :value="detailMemberInfo.user_name" @blur="changeName" />
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <input class="info-content" :value="detailMemberInfo.user_name" />
          <!-- #endif -->
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">性别</text>
        <view class="info-item-right">
          <radio-group @change="genderChange">
            <label class="info-content">
              <radio style="margin-right: 30rpx" value="1" :checked="'1' == detailMemberInfo.user_gender ? true : ''">男
              </radio>
              <radio value="0" :checked="'0' == detailMemberInfo.user_gender ? true : ''">女</radio>
            </label>
          </radio-group>
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">姓名</text>
        <view class="info-item-right">
          <input class="info-content" :value="detailMemberInfo.real_name" @input="changeRealName" placeholder="请输入姓名" />
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">生日</text>
        <view class="info-item-right">
          <picker name="birthDate" mode="date" :start="timeStart" :end="timeEnd" @change="changeBirthday"
            :disabled="'edit' == mode" :value="chooseBirthday" style="flex-grow: 1">
            <input class="info-content" type="text" placeholder="请选择出生日期" :disabled="true"
              :value="chooseBirthday" />
          </picker>
        </view>
      </view>
      <!-- <view class="info-item">
        <text class="info-item-left">身份证</text>
        <view class="info-item-right">
          <input class="info-content" :value="detailMemberInfo.card_id" type="idcard" @input="changeCardId"
            placeholder="请输入身份证号" />
        </view>
      </view> -->
      <view class="info-item">
        <text class="info-item-left">职业</text>
        <view class="info-item-right">
          <input class="info-content" :value="detailMemberInfo.user_mbrVocation" @input="changeMbrVocation"
            placeholder="请输入职业信息" />
          <!-- <image class="icon-arrow" src="/image/arrow_right.png"></image> -->
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">联系地址</text>
        <view class="info-item-right">
          <picker class="info-content" mode="multiSelector" @change="bindMultiPickerChange"
            @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray" range-key="name">
            <input :disabled="true" class="info-content" 
						:value="multiArray[0][multiIndex[0]].name ? multiArray[0][multiIndex[0]].name +
						                    (multiArray[1].length > 0 ? ' ' + multiArray[1][multiIndex[1]].name : '') +
						                    (multiArray[2].length > 0 ? ' ' + multiArray[2][multiIndex[2]].name : '') : ''"
						/>
          </picker>
        </view>
      </view>
      <view class="info-item">
        <text class="info-item-left">详细地址</text>
        <view class="info-item-right">
          <input class="info-content" name="address" placeholder="请填写具体地址" maxlength="50"
            placeholder-class="placeholder" :value="address" @input="changeAddress" />
        </view>
      </view>
    </view>

    <view class="reward-submit" @tap.stop.prevent="saveUserInfo">保存</view>
  </view>

  <!-- <view class='body'>
  <view class='edit-userinfo-ul'>
    <view class='edit-userinfo-li'>
      <text class='key'>头像</text>
      <view class='value'>
        <image class='head-img' src='{{util.attachedUrl(detailMemberInfo.user_logo,baseUrl)}}'
          bindtap='changeHeadImg' />
      </view>
    </view>

    <view class='edit-userinfo-li'>
      <text class='key'>昵称</text>
      <view class='value'>
        <input class='value' bindinput='changeName' value='{{detailMemberInfo.user_name}}'></input>
      </view>
    </view>

    <view class='edit-userinfo-li'>
      <text class='key'>性别</text>
      <view class='value'>
        <radio-group bindchange='genderChange'>
          <label class='user_gender'>
            <radio value='1' checked='{{"1" == detailMemberInfo.user_gender?true:""}}'>男</radio>
            <radio value='0' checked='{{"0" == detailMemberInfo.user_gender?true:""}}'>女</radio>
          </label>
        </radio-group>
      </view>
    </view>

    <view class='edit-userinfo-li'>
      <text class='key'>姓名</text>
      <input class='value' value='{{detailMemberInfo.real_name}}' bindinput='changeRealName'></input>
    </view>

    <view class='edit-userinfo-li'>
      <text class='key'>生日</text>
      <picker name="birthDate" mode='date' start="{{timeStart}}" end="{{timeEnd}}" bindchange='changeBirthday'
        disabled="{{'edit' == mode}}" value="{{detailMemberInfo.user_birthday}}" style="flex-grow: 1;">
        <input class='value' type="text" placeholder="请选择出生日期" disabled="true"
          value="{{detailMemberInfo.user_birthday}}"></input>
      </picker>
    </view>

    <view class='edit-userinfo-li'>
      <text class='key'>身份证</text>
      <input class='value' value='{{detailMemberInfo.card_id}}' bindinput='changeCardId'></input>
    </view>
    <view class='edit-userinfo-li'>
      <text class='key'>联系地址</text>
      <picker class="value" mode="multiSelector" bindchange="bindMultiPickerChange"
        bindcolumnchange="bindMultiPickerColumnChange" value="{{multiIndex}}" range="{{multiArray}}" range-key="name">
        <input disabled="true" class='value'
          value='{{multiArray[0][multiIndex[0]].name}}{{multiArray[1].length > 0 ?("，" + multiArray[1][multiIndex[1]].name):""}}{{multiArray[2].length > 0 ?("，" + multiArray[2][multiIndex[2]].name):""}}'>
        </input>
      </picker>
    </view>
    <view class='edit-userinfo-li'>
      <text class='key'></text>
      <input class='value' name='address' placeholder='请填写具体地址' maxlength='50' placeholder-class='placeholder'
        model:value='{{address}}'></input>
    </view>
  </view>
  <view class='save-btn' style='background-color: {{platformConfig.baseColor}} !important;' catchtap='saveUserInfo'>
    <text>保存</text>
  </view>
</view> -->
</template>
<script module="util" lang="wxs" src="../../../utils/util.wxs"></script>
<script>
   import {
      http
    } from '@/utils/commonRequest.js'; // 局部引入
  // minorPkg/pages/userEdit/userEdit.js
  let myDate = new Date();
  var Y = myDate.getFullYear(); //获取月份

  var M = myDate.getMonth() + 1 < 10 ? '0' + (myDate.getMonth() + 1) : myDate.getMonth() + 1; //获取当日日期

  var D = myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate();
  const app = getApp();

  const utils = require('./../../../utils/util.js');

  export default {
    data() {
      return {
        baseUrl: app.globalData.baseurl,

        detailMemberInfo: {
          user_logo: '',
          user_name: '',
          user_gender: '',
          real_name: '',
          user_birthday: '',
          card_id: '',
          user_mbrVocation: ''
        },
				chooseBirthday: '',
        //用户信息
        needAddress: false,

        multiArray: [],
        multiIndex: [0, 0, 0],
        province: null,
        city: null,
        country: null,
        address: null,

        //地址信息
        region: ['省', '市', '区'],

        chinaArea: [],
        timeStart: '',
        timeEnd: '',
        mode: '',
        name: ''
      };
    }
    /**
     * 生命周期函数--监听页面加载
     */
    ,
    onLoad: function(options) {
      let timeStart = Y - 100 + '-' + M + '-' + D;
      let timeEnd = Y + '-' + M + '-' + D;
        this.timeStart= timeStart
        this.timeEnd= timeEnd
      let that = this;
      let Page = getCurrentPages()[getCurrentPages().length - 2];
      let userInfo = Page.userInfo;
      
      // console.log(userInfo,8989)
      this.$checkAuth().then((res) => {
        // if ('authed' == res) {
          if (utils.isEmpty(userInfo)) {
            that.getDetailMemberInfo();
          } else {
            //从个人信息页面获取用户信息
              that.detailMemberInfo = userInfo
            let areaData = app.globalData.areaData;

            if (!utils.isEmpty(userInfo.user_address) && !utils.isEmpty(areaData)) {
              that.transAddress(areaData);
            } else {
              that.getCityInfo();
            }
          }
        // }
      });
    },
    methods: {
      /**
       * 获取详细的会员信息
       */
      getDetailMemberInfo: function() {
        let that = this;
				uni.showLoading({
					title: '加载中'
				});
        http.get('/personal/userInfo', {})
          .then((res) => {
            if ('200' == res.data.code) {
              let detailMemberInfoTmp = res.data.userinfo;
                that.detailMemberInfo = detailMemberInfoTmp
								if(detailMemberInfoTmp.user_birthday){
									this.chooseBirthday = detailMemberInfoTmp.user_birthday
								}
              this.getCityInfo();
            }

            that.refreshing = false;
						uni.hideLoading()
          })
          .catch((err) => {
						uni.hideLoading()
            that.refreshing = false;
          });
      },

      /**
       * 上传图像
       */
      changeHeadImg: function() {
        let that = this;
        uni.chooseImage({
          count: 1,
          //最多可以选择图片1张，最多9张
          sizeType: ['compressed'],
          // original 原图，compressed 压缩图，默认二者都有
          sourceType: ['album', 'camera'],
          // album 从相册选图，camera 使用相机，默认二者都有
          success: function(res) {
            let filePath = res.tempFilePaths;
            if (filePath[0].size > 5 * 1024 * 1024) {
              uni.showToast({
                title: '图片不能大于5MB',
                icon: 'none',
                duration: 1500
              });
              return;
            }

            let cookie;
            let JSESSIONID = uni.getStorageSync('LOGIN_JSESSIONID');

            if (!!JSESSIONID) {
              cookie = 'JSESSIONID=' + JSESSIONID + ';csrf_token=zcc';
            }

            let csrfToken;
            let CSRFTOKEN = uni.getStorageSync('LOGIN_CSRFTOKEN');

            if (!!CSRFTOKEN) {
              csrfToken = CSRFTOKEN;
            }

            uni.showLoading({
              title: '上传中...',
              mask: true
            });
            uni.uploadFile({
              url: that.baseUrl + '/' + 'miniapp/upload',
              filePath: filePath[0],
              name: 'headImg',
              header: {
                Cookie: cookie,
                'csrf-token': CSRFTOKEN
              },
              success: function(res) {
                uni.hideLoading();

                if ('200' == res.data.statusCode) {
                  let data = JSON.parse(res.data.data);

                  if ('200' == data.code) {
                    let image = JSON.parse(data.links)[0];
                    let db = that.detailMemberInfo;
                    db.user_logo = image;
                      that.detailMemberInfo = db
                  } else {
                    if ('TOO_BIG' == data.msg) {
                      utils.message('单张图片大小不可超过8Mb，请重新选择');
                    } else if ('MIME_ERROR' == data.msg) {
                      utils.message('图片格式不正确，请重新选择');
                    } else if ('ILLEGAL' == data.msg) {
                      utils.message('您上传的图片' + data.illegalInfo.substr(3));
                    } else {
                      utils.message('上传失败，请稍后再试');
                    }
                  }
                } else {
                  utils.message('上传失败，请稍后再试');
                }
              },
              fail: (res) => {
                uni.hideLoading();
                utils.message('上传失败，请稍后再试');
              }
            });
          },
          fail: function() {
            //fail
          },
          complete: function() {
            //complete
          }
        });
      },

      /**
       * 修改性别
       */
      genderChange: function(e) {
        let that = this;
        let userInfo = that.detailMemberInfo;
        userInfo.user_gender = e.detail.value;
          that.detailMemberInfo = userInfo
      },

      /**
       * 修改昵称 
       */
      changeName: function(e) {
        let that = this;
        let db = that.detailMemberInfo;
        db.user_name = e.detail.value;
        that.detailMemberInfo = db
      },

      /**
       * 修改真实姓名
       */
      changeRealName: function(e) {
        let that = this;
        let db = that.detailMemberInfo;
        db.real_name = e.detail.value;
          this.detailMemberInfo = db
      },

      /**
       * 修改生日
       * @param {*} e
       */
      changeBirthday: function(e) {
        console.log(e.detail.value);
        let detailMemberInfo = this.detailMemberInfo;
        detailMemberInfo.user_birthday = e.detail.value;
				this.detailMemberInfo = detailMemberInfo
				this.chooseBirthday = e.detail.value;
				// console.log('===detailMemberInfo',this.detailMemberInfo)
      },

      /**
       * 修改身份证
       */
      changeCardId: function(e) {
        let that = this;
        let db = that.detailMemberInfo;
        db.card_id = e.detail.value;
          this.detailMemberInfo = db
      },

      /**
       * 修改职业
       * @param {*} e
       */
      changeMbrVocation: function(e) {
        let that = this;
        console.log('change:', e.detail.value);
        let db = that.detailMemberInfo;
        db.user_mbrVocation = e.detail.value;
          this.detailMemberInfo = db
      },

      /**
       * 修改地址
       * @param {*} e
       */
      changeAddress: function(e) {
        console.log(e.detail.value);
          this.address = e.detail.value
      },

      /**
       * 保存个人信息
       */
      saveUserInfo: function() {
        let that = this;
        let detailMemberInfo = that.detailMemberInfo;
        let params = {
          userLogo: detailMemberInfo.user_logo,
          userName: detailMemberInfo.user_name,
          realName: detailMemberInfo.real_name,
          // cardId: detailMemberInfo.card_id,
          userPhone: detailMemberInfo.user_phone_encrypt,
          userGender: detailMemberInfo.user_gender,
          userBirthday: detailMemberInfo.user_birthday,
          userMbrvocation: detailMemberInfo.user_mbrVocation,
          address: detailMemberInfo.user_address
        };
        let userAddress = '';

        if (utils.isEmpty(detailMemberInfo.real_name)) {
          utils.message('请输入姓名');
          return;
        }

        if (utils.isEmpty(detailMemberInfo.user_birthday)) {
          utils.message('请完善生日信息');
          return;
        }
				
				// if (utils.isEmpty(detailMemberInfo.card_id)) {
				// 	utils.message('请输入身份证号');
				// 	return;
				// }
				
				// //校验身份证
    //     if (!utils.isEmpty(detailMemberInfo.card_id) && !utils.idCardValidate(detailMemberInfo.card_id)) {
    //       utils.message('身份证格式错误');
    //       return;
    //     }

        if (utils.isEmpty(detailMemberInfo.user_mbrVocation)) {
          utils.message('请完善职业信息');
          return;
        } //地址信息

        let province = this.province;
        let city = this.city;
        let country = this.country;
        let address = this.address;
				
        if (this.needAddress && utils.isEmpty(address)) {
          utils.message('请完善联系地址');
          return;
        }

        if (!utils.isEmpty(this.province) && !utils.isEmpty(this.city) && !utils.isEmpty(this.country && !utils
            .isEmpty(this.address))) {
          userAddress = province + ' ' + city + ' ' + country + ' ' + address;
        }

        params.address = userAddress;
        http.post('/member/saveUser', params, {header: {"content-type":"application/x-www-form-urlencoded"}})
          .then((res) => {
            if ('200' == res.data.code) {
              if ('SUCCESS' == res.data.msg) {
                utils.tips('保存成功');
              }

              uni.setStorageSync('ZSNSH_USER_INFO_MODIFY', true);
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1
                });
              }, 1500);
            }
          })
          .catch((err) => {
            utils.message('信息保存失败');
          });
      },

      //获取数据库中省市区数据
      getCityInfo: function() {
        var that = this;
        http.get('member/getArea1', {})
          .then((res) => {
            if ('200' == res.data.code) {
              let areaData = res.data.list;
              app.globalData.areaData = areaData;

              if (utils.isEmpty(that.detailMemberInfo.user_address)) {
                let temp = JSON.parse(JSON.stringify(areaData)); //新增地址

                  this.chinaArea = temp
                  this.multiArray = [temp, temp[0].citys, temp[0].citys[0].areas]
                  this.multiIndex = [0, 0, 0]
									this.province = areaData[0].name
                  this.city = areaData[0].citys[0].name
                  this.country = areaData[0].citys[0].areas[0].name
              } else {
                that.transAddress(areaData);
              }
            } else {
              console.log('省市区查询失败');
            }
          })
          .catch((err) => {
            console.log('省市区查询失败');
          });
      },

      /**
       * 将数据库存的地址渲染到picker中
       */
      transAddress: function(areaData) {
        let that = this;
        let temp = areaData;
        let index0;
        let index1;
        let index2;
        let userAddress = that.detailMemberInfo.user_address;

        if (!utils.isEmpty(userAddress)) {
          let addressArray = userAddress.split(' ');
            this.address = addressArray[3]
            this.region = [addressArray[0], addressArray[1], addressArray[2]]
            this.province = addressArray[0]
            this.city = addressArray[1]
            this.country = addressArray[2]
        }

        for (var i in areaData) {
          //对于修改地址的，要将其省市区对应
          if (this.province == areaData[i].name) {
            index0 = i;

            for (var j in areaData[i].citys) {
              if (this.city == areaData[i].citys[j].name) {
                index1 = j;

                for (var m in areaData[i].citys[j].areas) {
                  if (this.country == areaData[i].citys[j].areas[m].name) {
                    index2 = m;
                    break;
                  }
                }

                break;
              }
            }

            break;
          }
        }
          this.chinaArea = temp
          this.multiArray = [temp, temp[index0].citys, temp[index0].citys[index1].areas]
          this.multiIndex = [index0, index1, index2]
      },

      //地址控件点击确定
      bindMultiPickerChange: function(e) {
        var data = {
          multiArray: this.multiArray,
          multiIndex: this.multiIndex
        };
        var areaInfo = [];
        areaInfo[0] = data.multiArray[0][e.detail.value[0]].name;

        if (data.multiArray[1].length > 0) {
          areaInfo[1] = data.multiArray[1][e.detail.value[1]].name;
        }

        if (data.multiArray[2].length > 0) {
          areaInfo[2] = data.multiArray[2][e.detail.value[2]].name;
        }

          this.multiIndex = e.detail.value
          this.province = areaInfo[0]
          this.city = areaInfo[1]
          this.country = areaInfo[2]
      },

      //地址控件滑动
      bindMultiPickerColumnChange: function(e) {
        var data = {
          multiArray: this.multiArray,
          multiIndex: this.multiIndex
        }; //更新滑动的第几列e.detail.column的数组下标值e.detail.value
        data.multiIndex[e.detail.column] = e.detail.value; //如果更新的是第一列“省”，第二列“市”和第三列“区”的数组下标置为0

        if (e.detail.column == 0) {
          data.multiIndex = [e.detail.value, 0, 0];
        } else if (e.detail.column == 1) {
          //如果更新的是第二列“市”，第一列“省”的下标不变，第三列“区”的数组下标置为0
          data.multiIndex = [data.multiIndex[0], e.detail.value, 0];
        } else if (e.detail.column == 2) {
          //如果更新的是第三列“区”，第一列“省”和第二列“市”的值均不变。
          data.multiIndex = [data.multiIndex[0], data.multiIndex[1], e.detail.value];
        }
				
        var temp = this.chinaArea;
        data.multiArray[0] = temp;

        if (temp[data.multiIndex[0]].citys.length > 0) {
          //如果第二列“市”的个数大于0,通过multiIndex变更multiArray[1]的值
          data.multiArray[1] = temp[data.multiIndex[0]].citys;
          var areaArr = temp[data.multiIndex[0]].citys[data.multiIndex[1]]
          .areas; //如果第三列“区”的个数大于0,通过multiIndex变更multiArray[2]的值；否则赋值为空数组

          if (areaArr.length > 0) {
            data.multiArray[2] = areaArr;
          } else {
            data.multiArray[2] = [];
          }
        } else {
          //如果第二列“市”的个数不大于0，那么第二列“市”和第三列“区”都赋值为空数组
          data.multiArray[1] = [];
          data.multiArray[2] = [];
        } //data.multiArray = [temp, temp[data.multiIndex[0]].citys, temp[data.multiIndex[0]].citys[data.multiIndex[1]].areas];
        //setData更新数据

        // this.setData();
        // this.data = data
				this.multiArray = data.multiArray;
				this.multiIndex = data.multiIndex;
      }
    }
  };
</script>
<style>

  .body {
    overflow: hidden;
    font-size: 30rpx;
    width: 100%;
    height: 100%;
  }

  .edit-userinfo-ul {
    width: 710rpx;
    background-color: white;
    margin: 20rpx;
    border-radius: 10rpx;
  }

  .edit-userinfo-li {
    width: 670rpx;
    margin: 0 20rpx;
    border-bottom: 1rpx #f4f4f4 solid;
    display: flex;
    justify-content: space-between;
  }

  .edit-userinfo-li:last-child {
    border-bottom: none;
  }

  .key {
    width: 250rpx;
    height: 110rpx;
    line-height: 110rpx;
    text-align: left;
    font-size: 30rpx;
  }

  .value {
    width: 420rpx;
    text-align: right;
    font-size: 30rpx;
    height: 120rpx;
    line-height: 120rpx;
  }

  .head-img {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 6rpx solid rgba(256, 256, 256, 0.8);
    overflow: hidden;
  }

  .save-btn {
    width: 710rpx;
    height: 90rpx;
    color: white;
    margin: 40rpx 20rpx 0;
    border: none;
    font-size: 36rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .user_gender {
    display: flex;
    justify-content: space-between;
    margin-left: 170rpx;
  }
  .main-container {
    padding: 24rpx;
  }
  
  .info-list {
    padding: 0 8rpx;
    background: #ffffff;
    box-shadow: 0px 20rpx 60rpx 0px rgba(112, 136, 210, 0.1);
    border-radius: 16rpx;
  }
  
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 28rpx;
    min-height: 92rpx;
    border-bottom: 1px solid #eaeaea;
  }
  
  .info-item:last-child {
    border-bottom: none;
  }
  
  .info-item-left {
    color: #999;
    font-size: 32rpx;
  }
  
  .info-item-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 430rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    color: #333;
  }
  
  .user-logo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    background-color: #eee;
  }
  
  .info-content {
    flex: 1;
    text-align: right;
  }
  
  .icon-arrow {
    margin-left: 16rpx;
    flex-shrink: 0;
    width: 24rpx;
    height: 24rpx;
  }
  
  .reward-container {
    margin-top: 40rpx;
  }
  
  .reward-title {
    margin-bottom: 20rpx;
    font-weight: bold;
  }
  
  .reward-list {
    background-color: #fff;
    border-radius: 24rpx;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: scroll;
    width: 100%;
    padding: 40rpx 30rpx;
    box-sizing: border-box;
  }
  
  .reward-item {
    border-radius: 24rpx;
    border: 1px solid rgba(22, 158, 255, 0.1);
    width: 270rpx;
    flex-shrink: 0;
    overflow: hidden;
    padding: 20rpx;
    box-sizing: border-box;
    margin-right: 20rpx;
    position: relative;
  }
  
  .reward-item:nth-child(1) {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(22, 158, 255, 0.1));
  }
  
  .reward-item:nth-child(2) {
    background: linear-gradient(90deg, rgba(239, 191, 213, 0.1), rgba(157, 97, 253, 0.1));
  }
  
  .reward-item:nth-child(3) {
    background: linear-gradient(90deg, rgba(188, 227, 128, 0.1), rgba(55, 197, 87, 0.1));
  }
  
  .reward-item-title {
    font-weight: bold;
    margin-bottom: 20rpx;
    color: rgb(43, 23, 15);
  }
  
  .reward-item-txt {
    font-size: 24rpx;
    color: rgb(153, 153, 153);
    display: block;
    width: 180rpx !important;
    overflow-wrap: break-word;
    overflow: hidden;
  }
  
  .reward-item-num {
    position: absolute;
    bottom: 20rpx;
    right: 20rpx;
    font-size: 28rpx;
    color: rgb(255, 86, 66);
  }
  
  .reward-item-image {
    width: 80rpx;
    position: absolute;
    bottom: 0;
    right: 10rpx;
  }
  
  .reward-item-image image {
    width: 100%;
  }
  
  .reward-submit,
  .info-save {
    line-height: 84rpx;
    text-align: center;
    color: white;
    background-color: red;
    border-radius: 40rpx;
    margin: 44rpx 0;
    font-weight: bold;
    letter-spacing: 2rpx;
  }
</style>
